import React, { Component } from 'react';
import axios from 'axios';
import { Card, WhiteSpace } from 'antd-mobile';
import {NavLink} from 'react-router-dom'
export default class Records extends Component {
  constructor() {
    super();

    this.state = {
      error: null,
      isLoaded: false,
      records: []
    };
  }

  componentDidMount() {
    axios.get( `http://localhost:3000/product/${this.props.match.params.id}`).then(
      res => {
        this.setState({
          isLoaded: true,
          records: res.data
        });
      }
    ).catch(
      error => {
        this.setState({
          isLoaded: true,
          error
        })
      }
    )
  }

  render() {
    const { error, isLoaded, records } = this.state;
    if (error) {
      return <div>{ error.message }</div>;
    } else if (!isLoaded) {
      return <div>loading...</div>
    } else {
      return (
        <div>
          <WhiteSpace size="lg" />
          <Card full>
            <Card.Header
              title={this.state.records.title}
              extra={<span>￥{this.state.records.price.number}</span>}
            />
            <Card.Body>
              <div>
                <img src={this.state.records.img}/>
                <div>{this.state.records.text}</div>
              </div>
            </Card.Body>


                <Card.Footer content="" extra={<NavLink to={`/product/${this.state.records.id}/cart`}><button>加入购物车</button> </NavLink>} />


          </Card>
        </div>
      );
    }
  }
}

